<!doctype html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="./css/a.css">
</head>

<body>

    <div class="header">
        <div class="content">
            <div class="logo">
                <img src="img/logo.png" alt="">
            </div>

            <ul class="nav">
                <li class="active"><a href="">首页</a></li>
                <li><a href="">学习手册</a></li>
                <li><a href="">技术博客</a></li>
                <li><a href="">教学视频</a></li>
                <li><a href="">资源下载</a></li>
            </ul>

            <div class="search">
                <input type="text" placeholder="搜索">
            </div>
            <div class="login">
                <button>登录</button>
            </div>
        </div>
    </div>

    <div class="container">
        <div class="content">
            <div>
                <div class="title">
                    <span class="font-one">精选手册</span>
                    <span class="font-two">查看更多></span>
                </div>
                <ul class="list">
                    <li>
                        <div class="pic">
                            <img src="img/a.jpg" alt="">
                        </div>
                        <div class="list-right">
                            <p class="one">前端开发学习手册</p>
                            <p class="two">2020.2.20</p>
                            <button><a href="#">阅读</a></button>
                        </div>
                    </li>
                    <li>
                        <div class="pic">
                            <img src="img/a.jpg" alt="">
                        </div>
                        <div class="list-right">
                            <p class="one">前端开发学习手册</p>
                            <p class="two">2020.2.20</p>
                            <button><a href="#">阅读</a></button>
                        </div>
                    </li>
                </ul>
            </div>
            <div>
                <div class="title">
                    <span class="font-one">精选博客</span>
                    <span class="font-two">查看更多></span>
                </div>
                <ul class="list">
                    <li>
                        <div class="pic">
                            <img src="img/a.jpg" alt="">
                        </div>
                        <div class="list-right">
                            <p class="one">项目中你怎么使用git的</p>
                            <p class="two">2020.2.20</p>
                        </div>
                    </li>
                    <li>
                        <div class="pic">
                            <img src="img/a.jpg" alt="">
                        </div>
                        <div class="list-right">
                            <p class="one">项目中你怎么使用git的</p>
                            <p class="two">2020.2.20</p>
                        </div>
                    </li>
                </ul>
            </div>
            <div>
                <div class="title">
                    <span class="font-one">精选视频</span>
                    <span class="font-two">查看更多></span>
                </div>
                <ul class="list">
                    <li>
                        <div class="pic">
                            <img src="img/a.jpg" alt="">
                        </div>
                        <div class="list-right">
                            <p class="one">前端开发学习手册</p>
                            <p class="two">2020.2.20</p>
                            <button><a href="#">观看</a></button>
                        </div>
                    </li>
                    <li>
                        <div class="pic">
                            <img src="img/a.jpg" alt="">
                        </div>
                        <div class="list-right">
                            <p class="one">前端开发学习手册</p>
                            <p class="two">2020.2.20</p>
                            <button>观看</button>
                        </div>
                    </li>
                </ul>
            </div>
            <div class="footer">
                <p>更多精彩内容敬请期待~</p>
            </div>
        </div>
        <div class="slider">
            <div class="slider-top">
                <div class="picture">
                    <img src="img/a.jpg" alt="">
                </div>
                <div class="title">
                    <p>精选</p>
                </div>
                <ul class="slider-list">
                    <li class="lists clear">
                        <div class="pic">
                            <img src="img/a.jpg" alt="">
                        </div>
                        <div class="right">
                            <p>前端开发学习手册</p>
                            <button><a href="#">观看</a></button>
                        </div>
                    </li>
                    <li class="lists">
                        <p>编程学习的五大误区，你占了几点？</p>
                    </li>
                    <li class="lists">
                        <p>编程学习的五大误区，你占了几点？</p>
                    </li>
                    <li class="lists">
                        <p>编程学习的五大误区，你占了几点？</p>
                    </li>
                </ul>
            </div>
            <div class="copyright">
                <p>晓舟报告 | 移动端</p>
                <p>团队介绍</p>
                <p>晓舟报告官方网站</p>
                <p>©2019 冀ICP备18023262号-4</p>
            </div>
        </div>
    </div>
    <div class="friendLink">
        <div><img src="img/联系人.png" alt=""></div>
        <div><img src="img/微信.png" alt=""></div>
        <div><img src="img/返回顶部.png" alt=""></div>
    </div>
</body>

</html>